import React, { useState } from 'react';
import { Card, List, Input, Tabs, Collapse, Button, message } from 'antd';
import { SearchOutlined, QuestionCircleOutlined, PhoneOutlined, MailOutlined, WechatOutlined } from '@ant-design/icons';
import '../styles/HelpCenter.css';

const { Search } = Input;
const { TabPane } = Tabs;
const { Panel } = Collapse;

const HelpCenter = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [searchText, setSearchText] = useState('');

  // 模拟常见问题数据
  const faqData = {
    '1': [
      {
        question: '如何购买电影票？',
        answer: '1. 选择您想观看的电影\n2. 选择影院和场次\n3. 选择座位\n4. 确认订单并支付\n5. 支付成功后，您可以在"我的订单"中查看订单详情'
      },
      {
        question: '如何退票？',
        answer: '1. 在"我的订单"中找到需要退票的订单\n2. 点击"申请退票"\n3. 选择退票原因\n4. 提交退票申请\n5. 退款将在1-3个工作日内原路返回'
      },
      {
        question: '如何修改订单？',
        answer: '电影票订单一旦支付成功，无法修改场次和座位。如需修改，请先申请退票，然后重新购买。'
      }
    ],
    '2': [
      {
        question: '如何注册账号？',
        answer: '1. 点击首页右上角的"注册"按钮\n2. 填写手机号和验证码\n3. 设置密码\n4. 完成注册'
      },
      {
        question: '如何修改个人信息？',
        answer: '1. 登录后点击"我的"\n2. 进入"个人中心"\n3. 点击"编辑资料"\n4. 修改相关信息后保存'
      },
      {
        question: '忘记密码怎么办？',
        answer: '1. 在登录页面点击"忘记密码"\n2. 输入注册手机号\n3. 获取验证码\n4. 设置新密码'
      }
    ],
    '3': [
      {
        question: '支付方式有哪些？',
        answer: '我们支持以下支付方式：\n- 微信支付\n- 支付宝\n- 银联支付\n- 信用卡支付'
      },
      {
        question: '支付遇到问题怎么办？',
        answer: '如果支付过程中遇到问题，请：\n1. 检查网络连接\n2. 确认支付金额\n3. 联系客服寻求帮助'
      },
      {
        question: '退款多久到账？',
        answer: '退款将在1-3个工作日内原路返回您的支付账户。具体到账时间取决于银行处理速度。'
      }
    ]
  };

  const handleSearch = (value) => {
    setSearchText(value);
    // 这里应该实现搜索逻辑
    message.info(`搜索: ${value}`);
  };

  const handleTabChange = (key) => {
    setActiveTab(key);
  };

  const filteredFaqs = faqData[activeTab].filter(item => 
    item.question.toLowerCase().includes(searchText.toLowerCase()) ||
    item.answer.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <div className="help-center">
      <div className="help-header">
        <h1>帮助中心</h1>
        <Search
          placeholder="搜索问题"
          allowClear
          enterButton={<SearchOutlined />}
          size="large"
          onSearch={handleSearch}
          onChange={e => setSearchText(e.target.value)}
          className="search-input"
        />
      </div>

      <div className="help-content">
        <Tabs defaultActiveKey="1" onChange={handleTabChange}>
          <TabPane tab="购票相关" key="1">
            <Collapse defaultActiveKey={['0']}>
              {filteredFaqs.map((item, index) => (
                <Panel header={item.question} key={index}>
                  <p style={{ whiteSpace: 'pre-line' }}>{item.answer}</p>
                </Panel>
              ))}
            </Collapse>
          </TabPane>
          <TabPane tab="账号相关" key="2">
            <Collapse defaultActiveKey={['0']}>
              {filteredFaqs.map((item, index) => (
                <Panel header={item.question} key={index}>
                  <p style={{ whiteSpace: 'pre-line' }}>{item.answer}</p>
                </Panel>
              ))}
            </Collapse>
          </TabPane>
          <TabPane tab="支付相关" key="3">
            <Collapse defaultActiveKey={['0']}>
              {filteredFaqs.map((item, index) => (
                <Panel header={item.question} key={index}>
                  <p style={{ whiteSpace: 'pre-line' }}>{item.answer}</p>
                </Panel>
              ))}
            </Collapse>
          </TabPane>
        </Tabs>
      </div>

      <div className="contact-section">
        <Card title="联系我们" className="contact-card">
          <div className="contact-methods">
            <div className="contact-item">
              <PhoneOutlined className="contact-icon" />
              <div>
                <h3>客服电话</h3>
                <p>400-123-4567</p>
                <p>服务时间：9:00-22:00</p>
              </div>
            </div>
            <div className="contact-item">
              <MailOutlined className="contact-icon" />
              <div>
                <h3>客服邮箱</h3>
                <p>support@movieticket.com</p>
                <p>24小时内回复</p>
              </div>
            </div>
            <div className="contact-item">
              <WechatOutlined className="contact-icon" />
              <div>
                <h3>微信公众号</h3>
                <p>扫码关注获取更多帮助</p>
                <img src="https://example.com/qrcode.jpg" alt="微信公众号二维码" className="qrcode" />
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default HelpCenter; 